<template>
  <el-form
    :model="from"
    status-icon
    :rules="rules"
    ref="from"
    label-width="100px"
    class="login-form"
    key="registration"
  >
    <!-- 邮箱 -->
    <el-form-item label="邮箱" prop="email">
      <el-input type="email" v-model="from.email" autocomplete="off"></el-input>
    </el-form-item>

    <!-- 密码 -->
    <el-form-item label="密码" prop="password">
      <el-input
        type="password"
        v-model="from.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <!-- 用户名 -->
    <el-form-item label="用户名" prop="username">
      <el-input
        type="text"
        v-model="from.username"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <!-- 验证码 -->
    <el-form-item label="验证码" prop="code">
      <el-input placeholder="请输入验证码" v-model="from.code">
        <el-button slot="append" @click="getCode">获取验证码</el-button>
      </el-input>
    </el-form-item>

    <!-- 提交内容 -->
    <el-form-item>
      <el-button type="primary" @click="submitfrom('from')">提交</el-button>
      <el-button @click="resetForm('from')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { registeredFetch, getCode } from "@/api/login.js";
let emailRex = new RegExp(
  "^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"
);
export default {
  data() {
    // 邮箱验证
    let email = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        // 判断输入的内容是否符合正则表达式
        if (emailRex.test(value)) {
          callback();
        } else {
          callback(new Error("请正确输入邮箱"));
        }
      }
    };

    // 密码验证规则
    let password = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    // 用户名验证规则
    let username = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };

    // 验证码验证规则
    let code = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value.length < 3) {
        callback(new Error("验证码输入不正确"));
      } else {
        callback();
      }
    };

    return {
      from: {
        email: "",
        password: "",
        username: "",
        code: "",
        role: "",
      },

      rules: {
        email: [{ validator: email, trigger: "change" }],
        pass: [{ validator: password, trigger: "blur" }],
        username: [{ validator: username, trigger: "blur" }],
        code: [{ validator: code, trigger: "blur" }],
      },
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async registered() {
      await registeredFetch(this.from);
    },
    async getCode() {
      let email = this.from.email;
      if (emailRex.test(email)) {
        await getCode({ email }).catch(() => {});
      } else {
        this.$message.error("请输入正确邮箱");
      }
    },
    submitfrom(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.registered();
          this.resetForm();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>